<!-- 平台首页 -->
<template>
  <div class="container">
    <div class="swiper">
      <div class="swiper-container">
        <!-- 需要进行轮播的部分 -->
        <div class="swiper-wrapper">
          <!-- 每个节点 -->
          <div class="swiper-slide">
            <img src="../assets/images/banner1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/banner2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/banner3.jpg" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 前进后退按钮 -->
        <div class="swiper-button-next" slot="pagination">
          <img src="../assets/images/right-arrow.png" />
        </div>
        <div class="swiper-button-prev" slot="pagination">
          <img src="../assets/images/left-arrow.png" />
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-contain">
        <div class="left">
          <el-carousel height="337px">
            <el-carousel-item v-for="(item, index) in imageList" :key="index">
              <el-image :src="item.image"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <div class="right-contain">
            <div class="right-title">
              <div class="message-image"></div>
              <div class="more-btn" @click="handleMore"></div>
            </div>
            <div class="block">
              <span>----------------------------------------------------------------------------------------------------------</span>
              <el-carousel trigger="click" height="260px">
                <el-carousel-item v-for="(item, index) in newsList" :key="index">
                  <h5>时间 ：{{ item.createTime }}</h5>
                  <h5>作者 ：{{ item.createBy }}</h5>
                  {{ item.content }}
               
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>

      <div class="voice" @click="handleVoice">
        <div class="voice-btn">
          <i class="el-icon-right"></i>
        </div>
      </div>
      <div class="link">
        <div class="link-contain">
          <div class="link-img"></div>
          <div class="link-main">
            <el-link class="link-item" href="http://10.32.8.196/xszd/Default.aspx?dwid=jztyjt">信息共享平台</el-link>
            <el-link class="link-item" href="http://10.44.90.137:8083">警示教育平台</el-link>
          </div>
        </div>
      </div>
      <div class="footer">锦州铁源实业集团版权所有</div>
    </div>
</div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
// import navHeader from "@/views/header";
// import navFooter from "@/views/footer";
// import { listBriefing } from "../api/system/briefing";
import { getToken } from "../utils/auth";
import { mapGetters } from "vuex";
export default {
  created() {
    this.getNewsList();
    this.user = JSON.parse(localStorage.getItem("user"))
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },
  components: {
    // navHeader,
    // navFooter,
  },
  data() {
    return {
      imageList: [
        { image: require("../assets/images/01.png") },
        { image: require("../assets/images/02.png") },
        { image: require("../assets/images/03.png") },
        { image: require("../assets/images/04.png") },
      ],
      newsList: [],
      user:{}
    };
  },
  mounted() {
    this.initSwiper();
  },
  computed: {
    ...mapGetters(["name", "introduction"]),
  },
  
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        direction: "horizontal" /*横向滑动*/,
        loop: true,
        autoplay: true,
        observeParents: true, //必须加入
        observer: true, //必须加入
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          el: ".swiper-pagination",
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
      });
    },

    handleMore() {
      this.$router.push({
        path: "/indexV2list",
      });
    },
    handleVoice() {
      if (this.user != null) {
        this.$router.push({
          path: "/indexV2voice",
        });
      } else {
        this.$message({
          message: "请您进行登录！",
          type: "warning",
        });
        this.$router.push({
          path: "/login",
        });
      }
    },
     // 
    getNewsList() {
      this.$axios.get("/briefing/list",
      ).then((res) => {
        for (const item of res.data.data) {
          this.newsList.push(item)
        }
        this.newsList = this.newsList.slice(0, 5)
      });
    },
    showDetail(id) {
      this.$router.push({
        path: "/indexV2-list/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.list-style {
  height: 278px;
  margin-top: 20px;
}

.swiper-container {
  width: 100%;
  height: 470px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #f1f5f6;
  font-size: 18px;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 22px;
}

.swiper-button-prev {
  left: 30px;
  right: auto;
}

.swiper-button-prev:after {
  content: "none";
}

.swiper-button-next {
  right: 30px;
  left: auto;
}

.swiper-button-next:after {
  content: "none";
}

.main {
  width: 100%;
  margin-top: 60px;

  .main-contain {
    width: 1200px;
    margin: 0 auto;
    display: flex;

    .left {
      width: 510px;
      height: 337px;
      background: goldenrod;
      margin-right: 50px;
    }

    .right {
      width: 640px;

      .right-contain {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .right-title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .message-image {
            width: 151px;
            height: 39px;
            background: url("../assets/images/message.png");
          }

          .more-btn {
            width: 75px;
            height: 20px;
            background: url("../assets/images/more-btn.png");
            cursor: pointer;
          }
        }

        .right-box {
          width: 100%;
          // display: flex;
          // justify-content: flex-start;
          // align-items: center;
          // margin-top: 20px;
          // font-size: 14px;
          color: #757575;

          // flex-direction: column;
          .right-item {
            width: 100%;
            display: grid;
            grid-template-columns: 60% 15% 25%;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;

            &:hover {
              font-weight: bold;
              color: #347ac9;
            }

            .news-title {
              text-overflow: ellipsis;
              /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
              white-space: nowrap;
              /*让文字不换行*/
              overflow: hidden;
              /*超出要隐藏*/
            }
          }
        }
      }
    }
  }

  .voice {
    width: 100%;
    height: 211px;
    margin-top: 60px;
    background: url("../assets/images/voice.png");
    position: relative;
    cursor: pointer;

    .voice-btn {
      width: 96px;
      height: 23px;
      border: 1px solid white;
      border-radius: 30px;
      position: absolute;
      left: 36.5%;
      bottom: 48px;
      text-align: center;
      line-height: 23px;
      color: white;
      font-size: 16px;
    }
  }
}

.link {
  .link-contain {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    margin-top: 47px;

    .link-img {
      width: 151px;
      height: 39px;
      background: url("../assets/images/link.png");
    }

    .link-main {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .link-item {
        margin-right: 40px;
      }
    }
  }
}

.footer {
  width: 100%;
  height: 47px;
  background: #585c60;
  text-align: center;
  margin-top: 17px;
  line-height: 47px;
  font-size: 14px;
  color: white;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
  line-height: 22px;
}

.text-blue {
  color: #2373d5;
}

.text {
  text-overflow: ellipsis;
  /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
  white-space: nowrap;
  /*让文字不换行*/
  overflow: hidden;
  /*超出要隐藏*/
}

.footer {
  width: 100%;
  height: 47px;
  background: #585c60;
  text-align: center;
  margin-top: 17px;
  line-height: 47px;
  font-size: 14px;
  color: white;
  z-index: 9;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}</style>
